// main: template.less

@media (max-width: 1200px) {
  .mauto{max-width: 92%;}

}

///// ------------------ ipad ------------------ /////

@media (max-width: 1024px) {
body{padding-top: 70px;}
// Header
.header{display: none;}
.header-m{
  display: block !important;
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 70px;
  background: #fff;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
  &::after{
    display: none;
    position: fixed;
    content: '';
    top: 70px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
  }
  .logo{
    position: absolute;
    left: 50%;
    line-height: 70px;
    .trax();
    img{
      max-height: 40px;
    }
  }
  .m-menu-b{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 70px;
    cursor: pointer;
    &::before,&::after{
      position: absolute;
      top: 50%;
      left: calc(~"35px / 2");
      content: '';
      width: 25px;
      height: 1px;
      z-index: 9999;
      transition: all .3s ease-out .3s;
      -webkit-transition: all .3s ease-out .3s;
      background: #222;
    }
    &::before{
      transform: translateY(-4px) rotate(0);
      -webkit-transform: translateY(-4px) rotate(0);
    }
    &::after{
      transform: translateY(4px) rotate(0);
      -webkit-transform: translateY(4px) rotate(0);
    }
  }
  .m-menu{
    display: none;
    z-index: 888;
    position: fixed;
    width: 100%;
    width: 260px;
    height: 100%;
    top: 0;
    left: -260px;
    opacity: 1;
    background: #fafafa;
    text-align: left;
    padding-top: 70px;
    &::after{
      position: absolute;
      top: 70px;
      content: '';
      width: 100%;
      height: 1px;
      background: #ebebeb;
    }
  }
  .nav{
    height: calc(~"100% - 82px");
    overflow-x: hidden;
    overflow-y: auto;
    >li{
      border-bottom: 1px solid #ebebeb;
      animation: resize .5s both;
      -webkit-animation: resize .5s both;
      >a{
        position: relative;
        display: block;
        width: 100%;
        font-size: 15px;
        padding: 0 40px;
        color: #666;
        vertical-align: middle;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: break-word;
        overflow: hidden;
        .h(50px);
        &::after{
          position: absolute;
          left: 20px;
          top: 50%;
          margin-top: -5px;
          content: '';
          width: 8px;
          height: 8px;
          border: 1px solid #999;
          border-radius: 50%;
          background: transparent;
          .tra();
        }
      }
      .sub-nav{
        display: none;
        a{
          position: relative;
          display: block;
          line-height: 24px;
          padding: 12px 40px;
          background: #f2f2f2;
          color: #4E4E4E;
          &::before,&::after{
            position: absolute;
            content: '';
            width: 0;
            height: 0;
            left: 20px;
            top: 20px;
            border: 5px solid transparent;
            overflow: hidden;
            .tra();
          }
          &::before{
            left: 21px;
            border-left: 5px solid #555;
          }
          &::after{
            border-left: 5px #ebebeb solid;
          }
        }
      }
      &.cur{
        position: relative;
        &::after,&::before{
          position: absolute;
          content: '';
          background: #999;
          .tra(.5s);
        }
        &::before{
          top: 19px;
          right: 25px;
          width: 2px;
          height:12px; 
        }
        &::after{
          top: 24px;
          right: 20px;
          width: 12px;
          height:2px; 
        }
      }
      &.active{
        &::after{
          background: #fff;
        }
        &::before{
          height: 0;
        }
        >a{
          color: #fff;
          .wbbg();
          &::after{
            background: #fff;
            border-color: #fff;
          }
        }
        .sub-nav{
          li{
            animation: ReturnToNormal .5s both;
            -webkit-animation: ReturnToNormal .5s both;
          }
        }
      }
    }
  }
  // 语言版本·
  .m-language{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    a{
      color: #666;
      .h(40px);
      font-size: 16px;
      display: block;
      border-bottom: 1px solid #ebebeb;
      animation: slideInUp 1.5s both;
      -webkit-animation: slideInUp 1.5s both;
    }
  }
  .m-search-b{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 70px;
    cursor: pointer;
    background: url() no-repeat left center;
    background-size: 23px;
  }
}
html{
  &.active{
    height: 100%;
    overflow: hidden;
    body{
      height: 100%;
      overflow: hidden;
    }
    .header-m{
      left: 260px;
      &::after{
        display: block;
      }
      .m-menu-b{
        &::before,&::after{
          background: rgba(0, 0, 0, 1);
        }
        &::before{
          transform: translateY(0) rotate(225deg);
          -webkit-transform: translateY(0) rotate(225deg);
        }
        &::after{
          transform: translateY(0) rotate(-225deg);
          -webkit-transform: translateY(0) rotate(-225deg);
        }
      }
      .m-menu{
        display: block;
        left: 0;
      }
    }
    footer,main,.i-banner,.banner{
      .trax(260px);
    }
  }
}

///// ------------------ Index ------------------ /////
.i-main{

}
// main
main{

}

}